<template>
	<div class="label_content">
		<div class="shop_labels">
			<p class="label_title">温馨提示：最多仅可选择4项，用于主页对外展示</p>
			<ul class="lablist">
				<checkbox-group class="checkbox_group" @change="checkboxChange">
					<li v-for="(item,index) in labcontent" :key="index">
						<div class="btngroup">
							<checkbox :value="item.shop_tag_id" :checked="item.status" class="ckecked"/>
							<span class="labtext" :class="{active:item.status}">{{item.tag_name}}</span>
							<i class="iconfont iconjiaobiao" v-if="item.status"></i>
						</div>
					</li>
				</checkbox-group>
			</ul>
		</div>
		<div class="line_tab"></div>
		<div class="shop_labels">
			<p class="label_title">也可创建自定义标签进行选择</p>
			<ul class="form_input">
				<checkbox-group class="checkbox_group" @change="checkboxCustom">
					<li v-for="(item, index) in list" :key="index">
						<checkbox :value="item.shop_tag_id" :checked="item.shecked"  class="inputchebox" />
						<input class="uni-input" v-model="item.tag_name" @input="inputChange(item, index)"  placeholder="请输入四个字以内的标签内容" />
					</li>
				</checkbox-group>
			</ul>
		</div>
		<footer class="pub_fotter" @click="savelabels">保存</footer>
	</div>
</template>

<script>
import { getlabel, sendlabel } from '@/api/persondata'
export default {
	name: 'especialLabel',
	data() {
		return {
			labcontent: [],
			list: [
				{ checked: 1, tag_name: '', shecked: false, shop_tag_id: '' },
				{ checked: 2, tag_name: '', shecked: false, shop_tag_id: '' },
				{ checked: 3, tag_name: '', shecked: false, shop_tag_id: '' },
				{ checked: 4, tag_name: '', shecked: false, shop_tag_id: '' }
			],
			sys_shop_tag_id: [],
			tag_info: [],
			owner_user_id: '',
			tables: 0
		}
	},
	onLoad(opcation) {
		this.owner_user_id = opcation.owner_user_id
	},
	mounted() {
		this.getlables()
	},
	methods: {
		checkboxChange(e) {
			let datalist = this.labcontent
			let choock = e.detail.value
			for (let i in datalist) {
				this.labcontent[i].status = false
				for (let j in choock) {
					if (datalist[i].shop_tag_id == choock[j]) {
						this.labcontent[i].status = true
					}
				}
			}
			this.sys_shop_tag_id = choock
		},
		checkboxCustom(e) {
			let datalist = this.list
			let coum = e.detail.value
			let input = []
			for (let i in datalist) {
				this.list[i].status = false
				for (let j in coum) {
					let tag_info = {}
					if (this.tables == 1) {
						if (this.list[i].shop_tag_id == coum[j]) {
							this.list[i].shecked = true
							tag_info.tag_name = this.list[i].tag_name
							if (coum[j] > 100) {
								tag_info.shop_tag_id = ''
							} else {
								tag_info.shop_tag_id = this.list[i].shop_tag_id
							}
							tag_info.checked = 1
							input.push(tag_info)
						} else {
							tag_info.shop_tag_id = ''
						}
					} else {
						if (this.list[i].checked == coum[j]) {
							this.list[i].shecked = true
							tag_info.tag_name = this.list[i].tag_name
							tag_info.shop_tag_id = ''
							tag_info.checked = 1
							input.push(tag_info)
						}
					}
				}
			}
			this.tag_info = input
		},
		msg(msg) {
			uni.showToast({
				title: msg,
				icon: 'none'
			})
		},
		getlables() {
			getlabel().then((res) => {
				if (res.status == 'success') {
					let list = res.data.sys_tag
					let shop_tage = res.data.shop_tag
					let listed = this.list
					// let num = parseInt(Math.random() * (40,80) + 30)
					let num = 100
					for (var i in list) {
						if (list[i].checked == 1) {
							list[i].status = true
							this.sys_shop_tag_id.push(list[i].shop_tag_id)
						} else {
							list[i].status = false
						}
					}
					this.labcontent = list
					if (shop_tage.length > 0) {
						this.tables = 1
						listed.forEach((item, index) => {
							item.shop_tag_id = num + index
						})
						for (var j in shop_tage) {
							let tag_info = {}
							this.list[j].tag_name = shop_tage[j].tag_name
							this.list[j].shop_tag_id = shop_tage[j].shop_tag_id
							if (shop_tage[j].checked == 0) {
								this.list[j].checked = shop_tage[j].checked
								this.list[j].shecked = false
							} else if (shop_tage[j].checked == 1) {
								this.list[j].checked = shop_tage[j].checked
								this.list[j].shecked = true
								tag_info.tag_name = shop_tage[j].tag_name
								tag_info.shop_tag_id = shop_tage[j].shop_tag_id
								tag_info.checked = 1
								this.tag_info.push(tag_info)
							}
						}
					} else {
						for (var j in listed) {
							// this.list[j].shop_tag_id = listed[j].checked
							let sum = num * 1 + j * 1
							this.list[j].checked = sum
							this.list[j].shop_tag_id = sum
							console.log(num)
						}
					}
				} else {
					this.msg(res.message)
				}
			})
		},
		inputChange(item, index) {
			console.log(item, index)
			if (item.shecked) {
				this.tag_info[index] = item
			}
		},
		savelabels() {
			let total = this.sys_shop_tag_id.length
			let inputle = this.tag_info.length
			console.log('tag_info', this.tag_info)
			console.log('list', this.list)
			let sum = total + inputle
			if (sum > 4) {
				this.msg('你最多只能选择/创建4个服务标签')
			} else {
				let data = {
					sys_shop_tag_id: JSON.stringify(this.sys_shop_tag_id),
					tag_info: JSON.stringify(this.tag_info)
				}
				sendlabel(data).then((res) => {
					if (res.status == 'success') {
						this.msg('保存成功')
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					} else {
						this.msg(res.errors.message)
					}
				})
			}
		}
	}
}
</script>

<style scoped>
	.conbox {
		width: 100%;
		height: 100%;
		float: left;
		background: white;
	}

	.conbox header img {
		position: absolute;
		left: 0;
	}

	header a {
		font-size: 36px;
		font-weight: bold;
	}

	.label_content {
		/*margin-top: 90px;*/
	}

	.shop_labels {
		margin-top: 15px;
		width: 90%;
		margin-left: 5%;
		float: left;
	}

	.label_title {
		font-size: 24px;
		font-weight: bold;
		color: #666666;
	}

	.shop_labels .lablist {
		padding: 30px 0;
	}

	.checkbox_group {
		float: left;
		width: 100%;
	}
	.btngroup {
		width: 180px;
		height: 80px;
		float: left;
		border-radius: 10px;
	}
	.checkbox_group .ckecked {
		width: 202px;
		height: 82px;
		z-index: 999;
		opacity: 0;
		left:0;
		float: left;
		background:green;
		position: absolute;
	}
	.checkbox_group .inputchebox{
		float: left;
		border-radius: 50% !important;
		color: #ffffff !important;
	}
	.checkbox_group .uni-input{
		padding: 0;
		width: 60%;
	}
	.checkbox_group .labtext {
		left: 0;
		float: left;
		width: 190px;
		height: 80px;
		font-size: 36px;
		text-indent:5px;
		border-radius: 10px;
		text-align: center;
		line-height: 80px;
		background: white;
		position: relative;
		background: #F4F4F4;
	}
	.checkbox_group .active{
		color: #3A1B04;
		background: #FFD11A;
	}
	.shop_labels .lablist li {
		width: 210px;
		height: 80px;
		background: #F4F4F4;
		line-height: 80px;
		font-size: 30px;
		float: left;
		text-align: center;
		margin-left: 20px;
		margin-top: 20px;
		border-radius: 10px;
		position: relative;
	}
	.shop_labels .lablist li:nth-child(3n+1) {
		margin-left: 0;
	}
	.shop_labels .lablist li .iconjiaobiao {
		position: absolute;
		right: 3px;
		color: white;
		bottom: 0px;
		top: 18px;
		font-size: 40px;
	}
	.line_tab {
		width: 100%;
		height: 20px;
		float: left;
		margin-top: 40px;
		background: #F5F5F5;
	}

	.form_input {
		padding: 30px 0;
		margin-bottom: 100px;
	}

	.form_input li {
		height: 100px;
		margin-top: 20px;
	}
	.form_input li input {
		width: 80%;
		height: 50px;
		float: left;
		font-size:24px;
		padding-left: 20px;
		line-height:50px;
		border: 1px solid #EEEEEE;
	}
	.pub_fotter{
		color: #3a1b04;
		font-size: 32px;
		background: #ffd11a;
		text-align: center;
		line-height: 90px;
		z-index: 999;
		font-size: 32px;
		box-shadow: -1px -1px 1px #ccc;
	}
</style>
